<!--
 * @Author: your name
 * @Date: 2021-09-08 15:57:17
 * @LastEditTime: 2021-09-09 18:06:24
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \musicapp\src\components\playMusic.vue
-->
<template>
  <div class="playMusic">
      <div class="bg" :style="{backgroundImage:`url(${playDetail.al.picUrl})`}"></div>
      <div class="playTop">
          <div class="back" @click="$emit('back')">
            <svg class="icon" >
                <use xlink:href="#icon-zuojiantou"></use>
            </svg>
          </div>
          <div class="center">
              <div class="title">
                  <marquee behavior="scroll" direction="left">{{playDetail.al.name}}</marquee>
                </div>
          </div>
          <div class="share">
            <svg class="icon" >
                <use xlink:href="#icon-fenxiang"></use>
            </svg>
          </div>
            
      </div>
      <div class="playContent" v-show="!isPlayLyric" @click="isPlayLyric=!isPlayLyric">
          <img class="needle" :class={active:!paused} src="@/assets/needle-ab.png" alt="">
          <img class="disc" src="@/assets/music1.png" alt="">
          <img class="playImg" :src="playDetail.al.picUrl" alt="">
      </div>
      <div class="playLyric" ref="playLyric" v-show="isPlayLyric" @click="isPlayLyric=!isPlayLyric" >
          <p :class="{active:(currentTime*1000>=item.pre&&currentTime*1000<item.time)}" v-for="(item) in $store.getters.lyricList" :key="item">
            {{item.lyric}}
          </p>
          
      </div>
      <div class="progress"></div>
      <div class="playFooter">
            <svg class="icon" >
                <use xlink:href="#icon-danquxunhuan"></use>
            </svg>
            <svg class="icon" @click="goPlay(-1)">
                <use xlink:href="#icon-icon-1" ></use>
            </svg>
            <svg v-if="paused" class="icon play" @click="play">
              <use xlink:href="#icon-bofang"></use>
            </svg>
            <svg v-else class="icon play" @click="play">
              <use xlink:href="#icon-caozuo-bofang-zanting"></use>
            </svg>
            <svg class="icon" @click="goPlay(1)">
                <use xlink:href="#icon-icon-"></use>
            </svg>
            <svg class="icon">
                <use xlink:href="#icon-liebiao1"></use>
            </svg>
      </div>
  </div>
</template>

<script>
import { watch } from 'vue'
import {mapState} from 'vuex'
export default {
    props:['playDetail','paused','play'],
    data:function(){
        return{
            isPlayLyric:false,
        }
    },
    computed:{
        ...mapState(['lyric','currentTime','playlist','playCurrentIndex']), 
    },
    watch:{
        currentTime:function(newValue){
            // console.log(newValue);
            // console.log([this.$refs.playLyric]);
            let p = document.querySelector('p.active')
            // let offsetTop = p.offsetTop;

            this.$refs.playLyric.scrollTop = p.offsetTop;
            // let h = this.$refs.playLyric.offsetHeight;
            // if(offsetTop>h){
            //     this.$refs.playLyric.scrollTop = this.$refs.playLyric.scrollTop+(offsetTop-h/2)
            // }
            // console.log([p]);
        },
        
    },
    methods:{
        goPlay(num){
            console.log(num);
            console.log(this.playlist);
            console.log(this.playCurrentIndex);
            let index = this.playCurrentIndex+num
            if(index<0){
                index = this.playlist.length-1
            }else if(index == this.playlist.length){
                index = 0
            }
            this.$store.commit('setPlayIndex',index)
        }
    }
}
</script>

<style lang="less" scoped>
.playMusic{
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    .bg{
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        background-size: auto 100%;
        background-position: center;
        filter: blur(40px);
        
    }
    .playTop{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 7.5rem;
        height: 1.2rem;
        position: absolute;
        left: 0;
        top: 0;
        // color: #fff;
        padding: 0 0.4rem;
        .icon{
            // fill: #fff;
            width: 0.6rem;
            height: 0.6rem;
        }
        marquee{
            width: 5rem;
        }
    }
    .playContent{
        position: absolute;
        width: 7.5rem;
        height: 7.5rem;
        left: 0;
        top: 1.5rem;
        .needle{
            width: 2.5rem;
            height: auto;
            position: absolute;
            left: 3.5rem;
            transform-origin: 0.3rem 0.3rem;
            transform: rotate(-10deg);
            transition: all 1s;
            z-index: 10;
        }
        .needle.active{
            transform: rotate(10deg);
            transition: all 1s;
            z-index: 10;
        }
        .disc{
            width: 5.5rem;
            height: auto;
            position: absolute;
            left: calc(50% - 2.75rem);
            top: 3rem;
        }
        .playImg{
            width: 3.4rem;
            height: 3.4rem;
            border-radius: 50%;
            position: absolute;
            left: calc(50% - 1.7rem);
            top: 4.07rem;
        }
    }
    .playLyric{
        position: absolute;
        width: 7.5rem;
        height: 8rem;
        left: 0;
        top: calc(50% - 4rem);
        overflow: scroll;
        text-align: center;
        padding: 0.2rem 0;
        .active{
            color: red;
        }
    }
    .playFooter{
        width: 7.5rem;
        height: 1.5rem;
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.4rem;
        .icon{
            width: 0.6rem;
            height: 0.6rem;
        }
        .play{
            width: 1rem;
            height: 1rem;
        }
    }
}
</style>